<template>
  <div class="wrapper">
    <p class="tip">vue-admin-miao</p>
    <div class="cont">
      <div class="form sign-in">
        <h2>Welcome,Vue-admin</h2>
        <label>
          <span>用户名</span>
          <input v-model="loginForm.username">
        </label>
        <label>
          <span>密码</span>
          <input type="password" v-model="loginForm.password">
        </label>
        <button type="button" class="submit" @click="handleLogin">登录</button>
      </div>
      <div class="sub-cont">
        <div class="img">
          <div class="img__text m--up">
            <p>还没有账号？去注册吧!</p>
          </div>
          <div class="img__text m--in">
            <h2></h2>
            <p></p>
          </div>
          <div class="img__btn" @click="handleChange">
            <span class="m--up">去注册</span>
            <span class="m--in">去登录</span>
          </div>
        </div>
        <div class="form sign-up">
          <h2>注册</h2>
          <label>
            <span>用户名</span>
            <input type="email" v-model="RegisterForm.username">
          </label>
          <label>
            <span>密码</span>
            <input type="password" v-model="RegisterForm.password">
          </label>
          <button type="button" class="submit" @click="handleRegister">注册</button>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
import md5 from 'js-md5';
import {Register,Login} from '@/api/login.js'
export default {
  data() {
    return {
      RegisterForm:{
        app_key:'B936B31C556CBA99655FEF7D1CF12A1B',
        username:'',
        password:''
      },
      loginForm: {
        app_key:'B936B31C556CBA99655FEF7D1CF12A1B',
        username:'',
        password:''
      },
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    handleRegister(){
        let data = {...this.RegisterForm}
        data.password = md5(data.password)
       Register(data).then(res=>{
            this.RegisterForm.username = ''
            this.RegisterForm.password = ''
           if(res.ret == 200 && res.data.err_code == 0){
               this.$message({message: '注册成功！',type: 'success'})
               this.handleChange()
           }else{
                this.$message({message:res.data.err_msg,type: 'warning'})
           }
       })
    },
    handleLogin() {
        let data = {...this.loginForm}
        data.password = md5(data.password)
        Login(data).then(res=>{
            console.log(res)
            if(res.ret== 200 && res.data.err_code == 0){
                this.$message({message: '登录成功！',type: 'success'})
                window.localStorage.setItem('user',JSON.stringify(res.data))
                this.$router.push('/table')

            }else{
                this.$message({message: res.data.err_msg,type: 'warning'})
            }
        })
    },
    handleChange() {
      document.querySelector(".cont").classList.toggle("s--signup");
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/login.scss";
</style>